import React, { useState ,useEffect,} from 'react';
import { Search, } from 'react-vant';
// import type { ListInstance } from 'react-vant';
import widthRoute from '../../Utils/widthRoute';
import { useDispatch ,useSelector } from 'react-redux';
import axios from 'axios';
import '../../Api/DataList';
import { STORETYPE ,ALLLIST,PROPSTYPE} from '../../Type/Store.d';
import IndexChildren from '../../Compoment/IndexChildren';

function Index(route:any) {
    console.log(route.route);
    const Dispatch = useDispatch();
    const [value, setValue] = useState('');
    const AllList = useSelector((state:STORETYPE)=>state.list);
    
    useEffect(()=>{
        axios.get('/list').then(res=>{
            if(AllList.length<=0){
                Dispatch({
                    type:ALLLIST,
                    payload:res.data.list,
                })
            }
        })
    },[])

    return (
        <div className='Index'>
            <Search
                showAction
                label="地址"
                // 搜索页面
                actionText={<div onClick={() => route.route.Navigate('/Search')}>搜索</div>}
                value={value}
                onChange={setValue}
                placeholder="请输入搜索关键词"
            />
            <main>
                <IndexChildren></IndexChildren>
            </main>
        </div>
    )
}

export default widthRoute(Index)